<!--日期，没有ID-->
<template>
  <el-date-picker
    ref="domDate"
    v-model="value"
    v-bind="$attrs"
    :type="dateType[formItemMeta.controlType??120]"
    :name="'c' + formItemMeta.columnId"
    :format="myformat"
    :value-format="myvalueFormat"
    :title="title"
    :clearable="clearable"
  >
  </el-date-picker>
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue'
  // import { ElDatePicker } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController } from '../map'

  // 类型的字典
  const dateType = {
    120: 'date',
    121: 'datetime',
    122: 'month',
    123: 'week',
    124: 'year',
    125: 'daterange',
    126: 'datetimerange',
    127: 'monthrange',
    128: 'dates'
  }

  // 类型的字典
  const styleWidth = {
    120: 'width:120px;', // 'date',
    121: 'width:165px;', // 'datetime',
    122: 'width:120px;', // 'month',
    123: 'width:120px;', // 'week',
    124: 'width:120px;', // 'year',
    125: 'width:220px;', // 'daterange',
    126: 'width:220px;', // 'datetimerange',
    127: 'width:220px;', // 'monthrange',
    128: 'width:220px;', // 'dates'
  }

  // 根据类型设置默认格式化
  const dateProps = {
    120: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD'},
    121: { format: 'YYYY-MM-DD HH:mm:ss', valueFormat: 'YYYY-MM-DD HH:mm:ss'},
    122: { format: 'YYYY-MM', valueFormat: 'YYYY-MM'},
    123: { format: 'gggg-ww', valueFormat: 'gggg-ww'},
    124: { format: 'YYYY', valueFormat: 'YYYY'},
    125: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD'},
    126: { format: 'YYYY-MM-DD HH:mm:ss', valueFormat: 'YYYY-MM-DD HH:mm:ss'},
    127: { format: 'YYYY-MM', valueFormat: 'YYYY-MM'},
    128: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD'}
  }

export default defineComponent({
  name: 'el-from-item-date-picker',
  inheritAttrs: false,
  components: {
    // ElDatePicker
  },
  props: {
    ...itemProps, // 基础属性
    modelValue: [String, Date, Number, Array]
  },
  emits: ['update:modelValue'],
  setup (props, context) {
    // console.log('props-date', props)
    const { value } = itemController(props, context.emit)

    // 设置默认的格式化
    const myformat = computed(() => {
      if (props.format !== '') {
        return props.format
      } else {
        return dateProps[props.controlType??120].format
      }
    })
    const myvalueFormat = computed(() => {
      switch(props.valueFormat){
        case undefined:
        case '': // 根据详细类型返回默认格式化
          return dateProps[props.controlType??120].valueFormat
        case 'date': // 返回日期类型
          return undefined
        default: // 返回设置的格式化
          return props.valueFormat
      }
      
    })
 
    return {
      styleWidth, // 设置宽度
      dateType, // 详细的类型
      myformat, // 默认的格式化
      myvalueFormat, // 返回值的格式化
      value // 控件值
    }
  }
})
</script>
